<template>
  <div class="header-nav">
      <div class="container">
          <div class="left-nav">
              <a href="javascript:;">松果出行</a>
              <a href="javascript:;">MIUI</a>
              <a href="javascript:;">云服务</a>
              <a href="javascript:;">协议规则</a>
          </div>
          <div class="right-nav">
              <span @click="handleLogin">{{username}}</span>
              <span @click="sign">{{ahuce}}</span>
              <span @click="toOrder">订单列表</span>
              <a href="#/cart" class="car">
                  <span class="iconfont">&#xe600;</span>
                  购物车
                  <span class="car-number">({{this.$store.state.productsCount}})</span>
              </a>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'Header',
    data(){
        return{
            username: this.$store.state.username || sessionStorage.username || '登录',
            ahuce: ''
        }
    },
    methods: {
        handleLogin(){
            if(this.username === '登录'){
                this.$router.push('/login')
            }
        },
        sign(){
            console.log('click')
            if(this.ahuce == '注册'){
                this.$router.push('/register')
            }else if(this.ahuce == "退出"){
                this.$store.commit("saveusername",'')
                sessionStorage.username = ''
                this.username = '登录'
                this.ahuce = '注册'
                this.$store.commit('saveToken','')
                this.$cookie.delete('userId')
            }
        },
        getCarInfo(){
            this.axios.get('/carts/products/sum').then(res => {
                // console.log(res);
                this.$store.commit('saveProductsCount', res);
            })
        },
        toOrder(){
            this.$router.push('/cart/order')
        }
    },
    mounted(){
        this.getCarInfo();
        if(this.username !== "登录"){
            this.ahuce = '退出'
        }else{
            this.ahuce = "注册"
        }
    }
}
</script>

<style lang="scss" scoped>
.header-nav{
    width: 100%;
    height: 39px;
    background: #333;
    font-size: 12px;
    .container{
        display: flex;
        justify-content: space-between;
        a,span{
            color: #fff;
            font-size: 12px;
            line-height: 39px;
            display: inline-block;
            margin-right: 17px;
            cursor: pointer;
        }
        .car{
            margin-right: 0;
            height: 39px;
            padding: 0 20px;
            background: #ff6600;
        }
    }
}
</style>